<!-- 轮播图模块 -->
<template>
	<div class="swiper-main">
			<swiper
	          :options="swiperOption"
	           ref = "mySwiper">
			    <swiper-slide v-for='(item,index) in swiperList' :key='index'>
					<img :src="item.imgUrl" alt="">
				</swiper-slide>
			</swiper>
			<div class="swiper-pagination"></div>
		</div>
</template>

<script>
	import 'swiper/dist/css/swiper.css'
	import { swiper,swiperSlide } from 'vue-awesome-swiper'
	// import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
	export default {
		  name:'Swiper',
		  props:{
			  swiperList:Array
		  },
		  data(){
		    return{
				swiperOption: {
					autoplay: 3000,
					speed: 1000,
					pagination:{
						el:'.swiper-pagination',
					},
				}
		    }
		  },
		  components:{
		  			  swiper,
		  			  swiperSlide
		  },
	}
</script>

<style scoped>
	.swiper-main{
		position: relative;
		width: 100%;
		height:4.4rem;
	}
	.swiper-container{
		width: 100%;
		height: 4.4rem;
	}
	.swiper-main img{
		width: 100%;
		height:4.4rem;
	}
	.swiper-pagination{
		width: 100%;
	    bottom: 0;
	}
	::v-deep .swiper-pagination-bullet-active{
		background-color: #b0352f;
	}
	/* 调节轮播图点的间距 */
	::v-deep .swiper-pagination-bullet{
		margin: 0 0.1875rem;
	}
</style>

<!-- 这是轮播图模块 -->